<%--
  Date: 2024/10/16 9:48
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
</head>
<body>
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
    #box{
        margin-top: 200px;
    }
</style>

<div id="box">
    <h3 style="color: #16baaa;text-align: center">欢迎注册</h3>
    <form class="layui-form">
        <div class="demo-login-container">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-register">注册</button>
            </div>
            <div class="layui-form-item demo-login-other">
                <label>社交账号注册</label>
                <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
                或 <a href="login.jsp">登录帐号</a>
            </div>
        </div>
    </form>
</div>


<script>
    layui.use(function(){
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;

        // username  绑定失去焦点事件
        $('input[name="username"]').on('blur',function () {
           let username  =  $('input[name="username"]').val()
           $.get('/javaweb/user?method=selectByUsername',{username},function (res){
               if (res.code==0){
                    layer.msg(res.msg,{icon:1})
               }else{
                   layer.msg(res.msg,{icon:2})
               }
           })

            // // 默认是异步请求
            // $.ajax({
            //     url:'/javaweb/user?method=selectByUsername',
            //     data:{username:'tom'},
            //     // async:false,   // 设置请求的方式为同步
            //     type:'GET',
            //     dataType:'JSON',
            //     success:function (res){
            //         console.log(res)
            //     }
            // })
        })

        // 提交事件
        form.on('submit(demo-register)', function(data){
            var field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            $.post('/javaweb/user?method=registerUser',field,function (res) {
                if (res.code==0){
                    layer.msg(res.msg,{icon:1},function (){
                        window.location.href= 'login.jsp'
                    })
                }else {
                    layer.msg(res.msg,{icon:2})
                }
            })
            return false; // 阻止默认 form 跳转
        });
    });
</script>

</body>
</html>

